<!DOCTYPE html>
  <html dir='rtl'>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <link rel="stylesheet" type="text/css" href="../css/map.css"/>
  </head>
  <body>
    <div id="main">
    <div id="map"></div>
    <div id="footer">
      <div class="foot">
        <div class="mui-content" id="muiContent"></div>
        <div class="mui-col-xs-6">
          <button type="button" id="search" class="mui-btn">Search</button>
       </div>
       <div class="mui-col-xs-6">
          <button type="button" id="showList" class="mui-btn">Show List</button>
      </div>
    </div>
  </div>
  </body>
  <script id="template" type="text/x-dot-template">
  <div class="mui-row">
    <div class="mui-col-xs-6">
       <select id="select1" onchange="select1('select1')"  style="width: 100%;">
         <option value="">Organization</option>
           {{ for (var key in it) { }}
          <option value={{=it[key].id}}>{{=it[key].Name}}</option>
           {{ } }}
       </select>
   </div>
  <div class="mui-col-xs-6">
     <select onchange="select1('select2')" id="select2" style="width: 100%;">
       <option value="">Full-degree All</option>
       <option value="1">0-20%</option>
       <option value="2">21%-40%</option>
       <option value="3">41-60%</option>
       <option value="4">61-80%</option>
       <option value="5">81-100%</option>
     </select>
  </div>
  <div class="mui-col-xs-6">
    <select  onchange="select1('select3')" id="select3" style="width: 100%;">
      <option value="">Cleaned Status all</option>
      <option value="1">Cleaned</option>
      <option value="0">Not Cleaned</option>
    </select>
  </div>
  <div class="mui-col-xs-6">
    <select onchange="select1('select4')" id="select4" style="width: 100%;">
      <option value="">Equipment Status All</option>
      <option value="1">Normal</option>
      <option value="0">Failure</option>
    </select>
  </div>
  </div>
  </script>

  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/doT.min.js"></script>
  <script type="text/javascript" src="../script/gps.js"></script>
  <script type="text/javascript" src="../script/ajax.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDF8b23KBR4I5abL25PcVB930nkq2XeMAs&language=ar&region=EG"></script>
  <script type="text/javascript" src="../script/common.js"></script>
  <script type="text/javascript">
      apiready = function() {
        let showList = $api.byId('showList');
        // let query = $api.getStorage('query');
        var template = $api.byId('template');
        var search = $api.byId('search');
        var interText = doT.template(template.innerHTML);
        var muiContent = $api.byId('muiContent');
      // var values = select.option[index].value;
      getId(interText)
      initMap();
      let query = $api.getStorage('query');
      getData(query.Org);
      search.addEventListener('click', function() {
        var values1 = select1('select1');
        var values2 = select1('select2');
        var values3 = select1('select3');
        var values4 = select1('select4');

        // let query = $api.getStorage('query');
        let org = '';
        if (values1 === '') {
          console.log('111');
          org = query.Org;
          getData(org, values2, values3, values4);
        } else {
          org = values1;
          getData(org, values2, values3, values4);
        }
      });
      showList.addEventListener('click', function() {
        let org = '';
        var values1 = select1('select1');
        var values2 = select1('select2');
        var values3 = select1('select3');
        var values4 = select1('select4');
        if (values1 === '') {
          org = query.Org;
        } else {
          org = values1;
        }
        api.openWin({
            name: 'showlist3',
            url: './showlist3.html',
            bounces: false,
            slidBackEnabled: false,
            pageParam: {
              org: org,
              full: values2,
              clean: values3,
              equiment: values4
            }
        });
      });
      function getData (org, val2, val3, val4) {
        // let org = '';
        api.ajax({
          url: 'http://223.255.10.50:8029/dsp-ShateApp-ui/SmartBin/app/findInfo.action',
          type: 'get',
          data: {
            values: {
              Organization: org,
              Full_degreeStatus: val2,
              CleanedStatus: val3,
              EquipmentStatus: val4
            }
          },
          }, function(ret, err) {
            if (ret) {
              // console.log(JSON.stringify(ret))
              initMap(ret.data.rows);
            } else {
              api.alert('Server exception');

              // console.log(JSON.stringify(err));
            }
        });
      }

      function initMap(data) {
        let maps = $api.getStorage('maps');
        let wgs = wgs84togcj02(maps.Y, maps.X);
        let gcj = gcj02tobd09(wgs[0], wgs[1]);
        let bd0 = bd09togcj02(gcj[0], gcj[1]);
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: Number(maps.zoom),
          center: new google.maps.LatLng(bd0[0],  bd0[1])
        });
        if (typeof data === undefined) return false;
        var marker, position, icons;
        for (var key in data) {
          if(data.length === 0) {
            return false;
          }
          if (data[key].CleanedStatus === 'Not Cleaned') {
            icons = '../image/zn/' + String(data[key].OtherWaste1 + data[key].RecyclableWaste + data[key].OtherWaste2 + data[key].FoodScrap) +'.png';
          } else {
            icons = '../image/zn/' + String(data[key].OtherWaste1 + data[key].RecyclableWaste + data[key].OtherWaste2 + data[key].FoodScrap) +'.png';
          }
          if (data[key].Position === '') {
            data[key].Position = 'No Data';
          }
          if (data[key].LastOnlineTime == null) {
            data[key].LastOnlineTime = 'No Data'
          }
          var contentString = '<div id="content">'+
            '<div id="siteNotice">Name：'+data[key].name +'</div>'+
            '<div id="siteNotice">Dustbintype：'+data[key].Dustbintype +'</div>'+
            '<div id="siteNotice">Organization：'+data[key].Organization +'</div>'+
            '<div id="siteNotice">LastOnlineTime：'+data[key].LastOnlineTime +'</div>'+
            '<div id="siteNotice">RecyclableWaste：'+data[key].RecyclableWaste +'</div>'+
            '<div id="siteNotice">FoodScrap：'+data[key].FoodScrap +'</div>'+
            '<div id="siteNotice">OtherWaste1：'+data[key].OtherWaste1 +'</div>'+
            '<div id="siteNotice">OtherWaste2：'+data[key].OtherWaste2 +'</div>'+
            '<div id="siteNotice">CleanedStatus：'+data[key].CleanedStatus +'</div>'+
            '<div id="siteNotice">EquipmentStatus：'+data[key].EquipmentStatus +'</div>'+
            '<div id="siteNotice">Position：'+data[key].Position +'</div>'+
            '</div>';
            let wgs = wgs84togcj02(data[key].Y, data[key].X);
            let gcj = gcj02tobd09(wgs[0], wgs[1]);
            let bd0 = bd09togcj02(gcj[0], gcj[1]);
            position = new google.maps.LatLng(bd0[0], bd0[1]);
          var infowindow = new google.maps.InfoWindow({
            content: contentString,
            // maxWidth: 200,
            position: position
          });
          var marker = new google.maps.Marker({
             position:  position,
             map: map,
             icon: icons
          });
          headerClick(infowindow, marker);
        }
        function headerClick (infowindow, marker) {
          // infowindow.close(infowindow, marker);
          marker.addListener('click', function(e) {
            // infowindow.close();
            // console.log('111');
            // console.log(JSON.stringify(e));
            infowindow.open(infowindow, marker);
          });
        }
      }
    };
    // }
</script>
  </html>
